<template>
    <el-header class="header">
        <!--左侧平台logo与平台名称-->
        <div class="logo">
            <img
                :src="this.systemLogoUrl"
                class="system-logo"
                alt="系统LOGO"
                v-if="this.systemLogoUrl"
            />
            {{ this.platformName }}
        </div>

        <!--登出图标-->
        <div class="logout-icon" @click="logoutConfirm">
            <font-awesome-icon :icon="['fas', 'sign-out-alt']" class="awesome">
            </font-awesome-icon>
        </div>
        <!--登录按钮-->
        <router-link
            v-if="!this.userID"
            :to="{ name: 'login' }"
            class="login-text"
            >登录</router-link
        >
        <!--用户头像与用户名-->
        <el-tooltip
            v-else
            effect="light"
            placement="bottom-end"
            style="float: right"
            trigger="hover"
        >
            <div slot="content" style="text-align: center">
                <el-button size="mini" type="text" @click="updatePersonInfo"
                    >个人信息</el-button
                >
                <hr align="center" width="50" color="#987cb9" SIZE="1" />
                <el-button size="mini" type="text" @click="updatePassword"
                    >修改密码</el-button
                >
            </div>
            <div class="reference">
                <span class="username">{{ userName }}</span>
                <div class="head-img" v-if="userHeadImgUrl">
                    <img
                        :src="userHeadImgUrl"
                        class="header-user-headimg"
                        alt=""
                    />
                </div>
            </div>
        </el-tooltip>
        <div class="full-screen" @click="screenFull">
            <i class="el-icon-full-screen"></i>
        </div>
        <div class="full-screen" @click="goBack">
            <i class="el-icon-back"></i>
        </div>
    </el-header>
</template>

<script>
export default {
    name: 'Header',
    props: {
        systemLogoUrl: {
            type: String,
            required: true,
        },
        platformName: {
            type: String,
            required: true,
        },
    },
    methods: {
        // 跳转修改密码页面
        updatePassword() {
            this.$router.push('/ChangePassword');
        },
        updatePersonInfo() {
            this.$store.commit('setPropertyGeneral', {
                key: 'userID',
                value: this.userID,
            });
            this.$router.push('/editPersonalInfo');
        },
        // 登出确认
        logoutConfirm() {
            this.$confirm('即将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$axios({
                    method: 'PUT',
                    url: '/PROXY-Remote/logout',
                    headers: {
                        authorization: this.$store.getters.getAuthorization,
                    },
                }).then((res) => {
                    if (res.data.code === 200) {
                        if (res.data.data.isShowFrontPage === 'true') {
                            this.$router.push('/newLogin');
                        } else {
                            this.$router.push('/Login');
                        }
                        this.logout();
                    }
                });
            });
        },
        // 登出操作
        logout() {
            if (this.checkTimeoutInterval) {
                clearInterval(this.checkTimeoutInterval);
                this.checkTimeoutInterval = null;
            }
            this.$store.commit('setPropertyGeneral', {
                key: 'authorization',
                value: '',
            });
            this.$store.commit('itemsDiagnosisListTabChange', 'myIssues');
        },
        screenFull() {
            if (
                !document.fullscreenElement &&
                !document.msFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.webkitFullscreenElement
            ) {
                let docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {
                    // IE
                    docElm = document.body; // overwrite the element (for IE)
                    docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    // 火狐
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    // 谷歌
                    docElm.webkitRequestFullScreen();
                }
            } else if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        },
        goBack() {
            this.$router.go(-1);
        },
    },
    computed: {
        // 用户ID
        userID() {
            return this.$store.state.user.id;
        },
        // 用户名
        userName() {
            return this.$store.state.user.name;
        },
        // 用户头像图片链接
        userHeadImgUrl() {
            if (this.$store.state.user.headImgUrl) {
                return (
                    process.env.ImageServiceURL +
                    this.$store.state.user.headImgUrl
                );
            }
            return '/images/doctor.png';
        },
    },
};
</script>

<style scoped>
.main .user-info {
    float: right;
}

.logo {
    height: 60px;
    width: auto;
    font-size: 18px;
    color: #ffffff;
    line-height: 60px;
    float: left;
}

.logo img {
    vertical-align: middle;
}

.header {
    box-shadow: 0 1px 3px 1px rgba(26, 26, 26, 0.2);
    vertical-align: middle;
    margin-top: 0;
    background: #008cc8;
    z-index: 2;
    position: relative;
}

.head-img {
    width: 32px;
    height: 32px;
    margin-top: 14px;
    float: right;
}

.login-text {
    float: right;
    line-height: 60px;
    margin-left: 5px;
    color: #ffffff;
}

.username {
    margin-left: 10px;
    line-height: 60px;
    float: right;
    color: #ffffff;
}

.logout-icon {
    height: 60px;
    margin-left: 25px;
    line-height: 60px;
    float: right;
    cursor: pointer;
}

svg.awesome {
    height: 18px;
    width: 18px;
    color: #ffffff;
}

.reference {
    width: auto;
    float: right;
}
.full-screen {
    float: right;
    font-size: 25px;
    line-height: 60px;
    color: #fff;
    margin-right: 15px;
    cursor: pointer;
}
</style>
